{extend name="layout/main" /}

{block name="style"}
<style>
    .filter-bar {
        background: white;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .filter-form {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        align-items: end;
    }
    
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    
    .form-group label {
        font-size: 12px;
        color: #666;
        font-weight: 500;
    }
    
    .form-control {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }
    
    .form-control:focus {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
    }
    
    .stats-bar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .stat-item {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        text-align: center;
        transition: transform 0.2s;
    }
    
    .stat-item:hover {
        transform: translateY(-2px);
    }
    
    .stat-number {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .stat-label {
        color: #666;
        font-size: 14px;
    }
    
    .table-container {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .table-header {
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .table th,
    .table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #f0f0f0;
        vertical-align: middle;
    }
    
    .table th {
        background: #f8f9fa;
        font-weight: 600;
        color: #333;
    }
    
    .table tbody tr:hover {
        background: #f8f9fa;
    }
    
    .status-badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .status-active {
        background: #d4edda;
        color: #155724;
    }
    
    .status-inactive {
        background: #f8d7da;
        color: #721c24;
    }
    
    .role-badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .role-super_admin {
        background: #fff3cd;
        color: #856404;
    }
    
    .role-admin {
        background: #d1ecf1;
        color: #0c5460;
    }
    
    .action-buttons {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
    }
    
    .avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #3498db;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 16px;
    }
    
    .avatar.super-admin {
        background: #f39c12;
    }
    
    .user-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .user-details {
        display: flex;
        flex-direction: column;
    }
    
    .user-name {
        font-weight: 500;
        color: #333;
    }
    
    .user-email {
        font-size: 12px;
        color: #666;
    }
    
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        gap: 10px;
    }
    
    .pagination a,
    .pagination span {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-decoration: none;
        color: #333;
    }
    
    .pagination a:hover {
        background: #f8f9fa;
    }
    
    .pagination .current {
        background: #3498db;
        color: white;
        border-color: #3498db;
    }
    
    .protected-account {
        position: relative;
    }
    
    .protected-account::after {
        content: "🛡️";
        position: absolute;
        top: -5px;
        right: -5px;
        font-size: 12px;
    }
    
    @media (max-width: 768px) {
        .filter-form {
            grid-template-columns: 1fr;
        }
        
        .table-container {
            overflow-x: auto;
        }
        
        .action-buttons {
            flex-direction: column;
        }
        
        .stats-bar {
            grid-template-columns: repeat(2, 1fr);
        }
        
        .table-header {
            flex-direction: column;
            gap: 10px;
            align-items: stretch;
        }
    }
</style>
{/block}

{block name="breadcrumb"}
<span class="breadcrumb-item">首页</span>
<span class="breadcrumb-item active">账号管理</span>
{/block}

{block name="content"}
<!-- 统计栏 -->
<div class="stats-bar">
    <div class="stat-item">
        <div class="stat-number" style="color: #3498db;">{$statistics.total}</div>
        <div class="stat-label">管理员总数</div>
    </div>
    <div class="stat-item">
        <div class="stat-number" style="color: #27ae60;">{$statistics.active}</div>
        <div class="stat-label">正常账号</div>
    </div>
    <div class="stat-item">
        <div class="stat-number" style="color: #e74c3c;">{$statistics.inactive}</div>
        <div class="stat-label">禁用账号</div>
    </div>
    <div class="stat-item">
        <div class="stat-number" style="color: #f39c12;">{$statistics.super_admin}</div>
        <div class="stat-label">超级管理员</div>
    </div>
    <div class="stat-item">
        <div class="stat-number" style="color: #9b59b6;">{$statistics.admin}</div>
        <div class="stat-label">普通管理员</div>
    </div>
</div>

<!-- 筛选栏 -->
<div class="filter-bar">
    <form class="filter-form" method="get">
        <div class="form-group">
            <label>状态筛选</label>
            <select name="status" class="form-control">
                <option value="">全部状态</option>
                <option value="1" {if $status == '1'}selected{/if}>正常</option>
                <option value="0" {if $status == '0'}selected{/if}>禁用</option>
            </select>
        </div>
        <div class="form-group">
            <label>角色筛选</label>
            <select name="role" class="form-control">
                <option value="">全部角色</option>
                <option value="super_admin" {if $role == 'super_admin'}selected{/if}>超级管理员</option>
                <option value="admin" {if $role == 'admin'}selected{/if}>普通管理员</option>
            </select>
        </div>
        <div class="form-group">
            <label>关键词搜索</label>
            <input type="text" name="keyword" class="form-control" placeholder="用户名/昵称/邮箱" value="{$keyword}">
        </div>
        <div class="form-group">
            <button type="submit" class="btn">搜索</button>
        </div>
        <div class="form-group">
            <a href="/admin/account" class="btn" style="background: #95a5a6;">重置</a>
        </div>
    </form>
</div>

<!-- 管理员列表 -->
<div class="table-container">
    <div class="table-header">
        <h4 style="margin: 0;">管理员列表</h4>
        <a href="/admin/account/add" class="btn btn-success">添加管理员</a>
    </div>
    
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>管理员信息</th>
                <th>角色</th>
                <th>状态</th>
                <th>最后登录</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {volist name="admins" id="admin"}
            <tr>
                <td>{$admin.id}</td>
                <td>
                    <div class="user-info">
                        <div class="avatar {if $admin.role == 'super_admin'}super-admin protected-account{/if}">
                            {$admin.username|substr=0,1|upper}
                        </div>
                        <div class="user-details">
                            <div class="user-name">
                                {$admin.nickname|default=$admin.username}
                                {if $admin.role == 'super_admin'}
                                    <small style="color: #f39c12;">👑</small>
                                {/if}
                            </div>
                            <div class="user-email">{$admin.username}</div>
                            {if !empty($admin.email)}
                            <div class="user-email">{$admin.email}</div>
                            {/if}
                        </div>
                    </div>
                </td>
                <td>
                    <span class="role-badge role-{$admin.role}">
                        {if $admin.role == 'super_admin'}超级管理员{else}普通管理员{/if}
                    </span>
                </td>
                <td>
                    {if $admin.status == 1}
                        <span class="status-badge status-active">正常</span>
                    {else}
                        <span class="status-badge status-inactive">禁用</span>
                    {/if}
                </td>
                <td>
                    {if !empty($admin.last_login_time)}
                        {$admin.last_login_time|date='Y-m-d H:i'}
                        <br><small style="color: #666;">{$admin.last_login_ip|default='--'}</small>
                    {else}
                        <span style="color: #999;">从未登录</span>
                    {/if}
                </td>
                <td>{$admin.create_time|date='Y-m-d H:i'}</td>
                <td>
                    <div class="action-buttons">
                        <a href="/admin/account/edit/{$admin.id}" class="btn btn-sm">编辑</a>
                        
                        {if $admin.role != 'super_admin'}
                            {if $admin.status == 1}
                                <button class="btn btn-sm btn-warning" onclick="changeStatus({$admin.id}, 0)">禁用</button>
                            {else}
                                <button class="btn btn-sm btn-success" onclick="changeStatus({$admin.id}, 1)">启用</button>
                            {/if}
                        {/if}
                        
                        {if $admin.id != $admin_user.id && $admin.role != 'super_admin'}
                            <button class="btn btn-sm btn-danger" onclick="deleteAdmin({$admin.id})">删除</button>
                        {/if}
                        
                        {if $admin.role == 'super_admin'}
                            <small style="color: #f39c12;">受保护</small>
                        {/if}
                    </div>
                </td>
            </tr>
            {/volist}
        </tbody>
    </table>
    
    {if empty($admins)}
    <div style="text-align: center; padding: 40px; color: #666;">
        暂无管理员数据
    </div>
    {/if}
    
    <!-- 分页 -->
    {if isset($admins) && $admins->total() > 0}
    <div class="pagination">
        {$admins->render()}
    </div>
    {/if}
</div>
{/block}

{block name="script"}
// 确保函数在全局作用域
window.changeStatus = function(id, status) {
    const statusText = status == 1 ? '启用' : '禁用';
    console.log('changeStatus called:', id, status, statusText);
    
    if (confirm(`确定要${statusText}这个管理员吗？`)) {
        fetch('/admin/account/changeStatus/' + id, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: 'status=' + status
        })
        .then(response => response.json())
        .then(data => {
            console.log('Response:', data);
            if (data.code === 1) {
                alert(data.msg);
                window.location.reload();
            } else {
                alert('操作失败：' + data.msg);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请重试');
        });
    }
};

window.deleteAdmin = function(id) {
    console.log('deleteAdmin called:', id);
    
    if (confirm('确定要删除这个管理员吗？\n\n⚠️ 警告：此操作不可恢复！\n\n注意：\n- 超级管理员账号不能被删除\n- 不能删除自己的账号')) {
        fetch('/admin/account/delete/' + id, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log('Delete response:', data);
            if (data.code === 1) {
                alert('✅ 删除成功');
                window.location.reload();
            } else {
                alert('❌ 删除失败：' + data.msg);
            }
        })
        .catch(error => {
            console.error('Delete error:', error);
            alert('❌ 网络错误，请重试');
        });
    }
};

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
    console.log('账号管理页面初始化完成');
    console.log('changeStatus function:', typeof window.changeStatus);
    console.log('deleteAdmin function:', typeof window.deleteAdmin);
});
{/block}
